<template>
  <div class="box">
    <div class="header3">
        <van-nav-bar
            title="个人信息"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
    </div>
    <div class="main">
      <div>
        <van-cell-group>
          <van-cell title="昵称" :value="nickname" />
          <van-cell title="性别" :value="sex" />
          <van-cell title="电话号码" :value="tel" />
          <van-cell title="用户名" value="" @click="binding"/>
          <van-cell title="我的收获地址" is-link @click="toLocation"/>
        </van-cell-group>
      </div>
      <!-- 修改密码 -->
      <div class="box1" v-if="passFlag">
        <section><span>旧密码：</span><input type="text" v-model="password1"></section>
        <section><span>新密码：</span><input type="text" v-model="password2"></section>
        <div class="box11">
            <van-button round type="info" color="red" @click="accomplish">完成</van-button>
            <van-button round type="info" color="red" @click="no">取消</van-button>
        </div>
      </div>
      <div class="box2">
        <van-button round type="info" color="gray" @click="passFlag='true' ">修改密码</van-button>
        <van-button round type="info" color="red" @click="no2">退出登录</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Cell, CellGroup,Button,NavBar } from "vant";

import { toUser,bindUser,upDate } from "../api/message";
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Button);
Vue.use(NavBar);
export default {
  name: "MyMessageView",
  data() {
    return {
        nickname:'',
        sex:'',
        tel:'',
        username:'',
        passFlag:false,
        password1:'',
        password2:'',
    };
  },
  created () {
    toUser({userid:localStorage.getItem('userid')}) .then(res=>{
        console.log(res.data.data);
        this.nickname=res.data.data[0].nickname;
        this.tel=res.data.data[0].tel;
        this.sex=res.data.data[0].sex==-1?'女':'男';
    })
  },
  methods: {
    onClickLeft() {
        this.$router.go(-1);
    },
    binding() {
        bindUser({})
    },
    // 点击修改密码
    alterPass() {
        this.passFlag = !this.passFlag
    },
    // 点击完成
    accomplish() {
        upDate({userid:localStorage.getItem('userid'),oldpassword:this.password1,newpassword:this.password2}).then(res=>{
            console.log(res);
            localStorage.clear();
            this.$router.push('/home')
        })
    },
    // 点击取消
    no () {
        this.passFlag=false
    },
    // 点击退出登录
    no2() {
        localStorage.clear();
        this.$router.push('/home')
    },
    // 点击收货地址
    toLocation() {
        this.$router.push('/location')
    }
  }
};
</script>

<style>
.box1 {
  display: flex;
  flex-direction: column;
  align-items: center;  
}
.box1 .box11 {
    padding: 0 .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box2 {
    display: flex;
    padding: 0 .5rem;
    justify-content: space-between;
    align-items: center;
}
</style>